By susata on

I have created a View that is a list, which is called image left-sidebar. This is a random image that displays in the left sidebar on pages of the site. Everything works great-- except a bullet appears next to the image, and I would very much like to remove that bullet. I believe the way to do this is to add the following style to the correct style sheet:

.view-item view-item-image-leftsidebar ul li {
list-style-image: none;
list-style-type: none;
}

I put this together based on what I read at http://groups.drupal.org/node/4161

HOWEVER, I just don't know which style sheet to add this style to. I tried adding this style to my theme's style sheet, zen-classic.css, but this has had no effect. The bullet remains.

Could someone please enlighten me: do I have the above style correct, and which is the correct .css file that I must edit in order to enact this change?

Thank you!

⋅ Categories: Drupal 5.x

Comments

zeta ζ’s picture

zeta ζ commented

You might try removing view-item-image-leftsidebar.

susata’s picture

susata commented

Thanks for the reply, zeta-zoo! I tried that but, unfortunately, it did not remove the bullet. I'm pretty convinced that I'm inserting the style into the wrong .css file. Additionally, I bet that, if this modification had worked, it would have removed the bullets from all of my list views, not just the specific one named image-leftsidebar. I get that idea from the explanation provided in http://groups.drupal.org/node/4161 . Thanks again for trying to help me out.

zeta ζ’s picture

zeta ζ commented

If you want view-item-image-leftsidebar you will need a . before it;- .view-item-image-leftsidebar. If you try ul li { this will apply to all list items, and will at least tell you whether you’ve got the right .css .

Get firebug and find out which classes you need, and which .css are being included (unless you have css aggregation on).

susata’s picture

susata commented

Hey zeta-zoo,

I tried what you suggested. I tested specifying a style for ul li alone, which was an excellent suggestion to narrow down to correct css. However, I could not get the bullets to go away even then.

I installed Firebug--and it is VERY cool. I was able to use it to find the exact name of the classes affecting list elements in my list view--but I STILL could not remove the bullets.

So I did more searching and found a thread that I had not found before: http://drupal.org/node/91340 , where other folks were also looking for a way to remove list view bullets. I used what they said worked for them, but those bullets did not move.

BUT THEN at the very bottom of that thread I found one last entry titled "another way," contributed by "foxtrotcharlie." Charlie's message references: http://drupal.org/node/136136 . I went there and found instructions for using the Views Theming Wizard to accomplish the removal of bullets, which I followed exactly--and this time, Thank GOD, the bullets vanished.

Thank you so much for taking the time to give me some tips--I appreciated your moral support, plus FIREBUG is a total gem.

zeta ζ’s picture

zeta ζ commented

So, it wasn’t the right .css – why not try one of the .css that firebug told you was being used?

You’ve not only got rid of the bullets, but the list markup too.

Glad you’ve found firebug.

susata’s picture

susata commented

In this particular case, I was glad just to find the sledgehammer. Yeah, no doubt I was doing something wrong with the css, either in specifying the style or the sheet I was placing it in (even with Firebug's excellent help--that was not clear). I do hope to come back to this a little later after I understand Drupal's style sheets better, not to mention css, to figure out the more refined approach.

Lovin' Firebug though. Came in handy in another project today. Don't know how I've lived without it.

Thanks again.

xxparanormalxx’s picture

xxparanormalxx commented

i have a very specific answer for this. i've tried digging around to see where what cascades and affects what. that can sometimes be incredibly difficult and time consuming. for now, i've just resorted to very specific div tags to wrap my menus. although you've already found your answer, maybe someone else would like to try my conclusions as well.

example that works for me (i confirmed it today and forever, i will not forget this as it's been such a b**** to figure out)

html:

<div id="block-menu-1">
  <ul class=menu>
    <li class=leaf>milk</li>
    <li class=leaf>bread</li>
  </ul>
</div>

css:

#block-menu-1 .menu, #block-menu-1 .leaf { /* this is where you need to separate the two tags, ul & li, to make it work */
  list-style-type: none;
  list-style-image: none;
}

That's all it was. Did the trick for me on IE6, IE7 and Firefox.

myka’s picture

myka commented

just in case anyone is still stuck on this (most of the posts didn't help me), this is the code I wrote to remove the bullets, it's nice and short to the point.

.item-list ul li
{
list-style-type: none;
list-style-image: none;
margin: 0 0 0 0;
}

the margin bit is just if you don't want any spacing.

squidz’s picture

squidz commented

I've writtent this as well...but in my main style.css, it does nothing. so what style sheet did you put it in?

usabilitydeveloper.com’s picture

usabilitydeveloper.com commented

I put it at the very end of my main style sheet

nflowers1228’s picture

nflowers1228 commented

I had to change it in my html-elements.css if that is any help to anyone. This seemed to take forever to find the right place.

majorevent’s picture

majorevent commented

In my case, the Post div in the CSS was overriding whatever I added to the CSS

So for the CSS for item-list to work, make sure you remove (or comment out) the ul, li styles for .Post as i did below:

/*
.Post ol li, .Post ul ol li
{
background: none;
padding-left:0;
}

.Post ul li, .Post ol ul li
{
background-image: url('images/PostBullets.png');
background-repeat:no-repeat;
padding-left:11px;
}
*/

Hope this helps

theatereleven’s picture

theatereleven commented

For anyone else new to Drupal and using a Zen sub theme, here is what I did that works:

I was using the ImageMenu module and it was adding the bullets. My menu is called "testmenu" in Image Menu and I have a "testmenu" region in my.info file as well (if that even matters). In my page.tpl.php I insert the menu into the testmenu region.

In my main .css in the zen subtheme folder at the end I added this (same as above but showing you where name goes if you are new):

#testmenu ul li
{
list-style-type: none;
list-style-image: none;
margin: 0 0 0 0;
}

This removed them.